<template>
  <flexbox-item class="apply-type" :span="3">
    <div v-if="applyType === 2">
      <i class="apply-contract"></i>
      合同申请
    </div>
    <div v-else-if="applyType === 1">
      <i class="apply-leave"></i>
      请假申请
    </div>
    <div v-else-if="applyType === 3">
      <i class="apply-secrecy"></i>
      保密申请
    </div>
    <div v-else-if="applyType === 4">
      <i class="apply-key"></i>
      密钥申请
    </div>
    <div v-else-if="applyType === 5">
      <i class="apply-hol-leave"></i>
      例假申请
    </div>
    <div v-else-if="applyType === 6">
      <i class="apply-fdh"></i>
      付外佣申请
    </div>
  </flexbox-item>
</template>

<script>
  import { FlexboxItem } from 'vux';
  export default {
    name: '',
    data () {
      return {
        statusText: this.applyStatus
      };
    },
    props: ['applyType', 'isToDoList'],
    components: {
      FlexboxItem
    },
    mounted () {
    },
    methods: {
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';

  .apply-type{
    font-size: getRem(28);
    position: relative;
    font-weight: bold;
  }
  i.apply-rebate, i.apply-leave, i.apply-secrecy, i.apply-key, i.apply-contract, i.apply-hol-leave, i.apply-fdh{
    display: block;
    position: absolute;
  }
  .apply-secrecy{
    width: getRem(48);
    height: getRem(44);
    top: 50%;
    left: -(getRem(58));
    margin-top: -#{getRem(22)};
    background: url(../../assets/images/secrecy_icon@3x.png) no-repeat 0 center;
    background-size: getRem(48);
  }
  .apply-contract{
    width: getRem(48);
    height: getRem(44);
    top: 50%;
    left: -(getRem(58));
    margin-top: -#{getRem(22)};
    background: url(../../assets/images/contract_icon@3x.png) no-repeat 0 center;
    background-size: getRem(48);

  }
  .apply-key{
    width: getRem(48);
    height: getRem(44);
    top: 50%;
    left: -(getRem(58));
    margin-top: -#{getRem(22)};
    background: url(../../assets/images/secret-key_icon@3x.png) no-repeat 0 center;
    background-size: getRem(48);
  }
  .apply-rebate{
    width: getRem(48);
    height: getRem(44);
    top: 50%;
    left: -(getRem(58));
    margin-top: -#{getRem(22)};
    background: url(../../assets/images/icon-rebate.png) no-repeat 0 center;
    background-size: getRem(48) getRem(44);
  }
  .apply-leave{
    width: getRem(42);
    height: getRem(46);
    top: 50%;
    left: -(getRem(55));
    margin-top: -#{getRem(23)};
    background: url(../../assets/images/icon-leave.png) no-repeat 0 center;
    background-size: getRem(42) getRem(46);
  }
  .apply-hol-leave{
    width: getRem(42);
    height: getRem(46);
    top: 50%;
    left: -(getRem(55));
    margin-top: -#{getRem(23)};
    background: url(../../assets/images/icon-hol-leave@3x.png) no-repeat 0 center;
    background-size: getRem(42) getRem(46);
  }
  .apply-fdh{
    width: getRem(42);
    height: getRem(46);
    top: 50%;
    left: -(getRem(55));
    margin-top: -#{getRem(23)};
    background: url(../../assets/images/icon-fdh.png) no-repeat 0 center;
    background-size: getRem(42) getRem(46);
  }
</style>